/* eslint-disable react/no-array-index-key */
import React, { useState, useRef, useEffect, forwardRef } from 'react'
import { Swiper } from 'antd-mobile'
import SwiperLayout from '@/components/Common/SwiperLayout'
import type { SwiperLayoutRef } from '@/components/Common/SwiperLayout'
import type { SwiperRef } from 'antd-mobile/es/components/swiper'
import {
    FirstPage,
    SecondPage,
    ThirdPage,
    FourthPage,
    FifthPage,
    SixthPage,
    SeventhPage,
    EighthPage,
    NinthPage,
} from './pages'
import { GenerateReport } from '../common/generate'
import type { SwiperComponent, TeacherReportData } from './interface'
import { fetchTeacherReport } from './api'
import { setLocalStorage } from '@/storage'
import {
    FirstPlatformDetail,
    SecondPlatformDetail,
    ThirdPlatformDetail,
} from '../common/PlatformDetail'
import { PlatformData } from '../common/PlatformData'
import { history } from 'umi'
import { generateSwiperPages } from './utils'

const ForwardLayoutRef = forwardRef(SwiperLayout)
export const TeacherReport = () => {
    const ref = useRef<SwiperRef>(null)
    const layoutRef = useRef<SwiperLayoutRef>(null)
    const [currentIndex, setCurrentIndex] = useState<number>(0)
    const [reportData, setReportData] = useState<TeacherReportData>()
    const [eighthPages, setEighthPages] = useState<SwiperComponent[]>([])
    const [ninthPages, setNinthPages] = useState<SwiperComponent[]>([])

    useEffect(() => {
        const initData = async () => {
            const { data } = await fetchTeacherReport()
            setReportData(data)
            setLocalStorage('TEACHER_REPORT_DATA', data)
            if (JSON.stringify(data) === '{}') {
                history.replace({ pathname: '/report/nodata', query: { type: 'teacher' } })
            }
        }
        initData()
    }, [])

    useEffect(() => {
        if (!reportData) return

        if (Array.isArray(reportData.course_student_module)) {
            setEighthPages(generateSwiperPages(reportData.course_student_module, EighthPage))
        }

        if (Array.isArray(reportData.expert_course_module)) {
            setNinthPages(generateSwiperPages(reportData.expert_course_module, NinthPage))
        }
    }, [reportData])

    const swiperList: SwiperComponent[] = [
        {
            component: FirstPage,
            isShow: true,
        },
        {
            component: SecondPage,
            isShow: Boolean(reportData?.is_show_basic_student),
        },
        {
            component: ThirdPage,
            isShow: Boolean(reportData?.is_show_expert_student),
        },
        {
            component: FourthPage,
            isShow: Boolean(reportData?.is_show_region_student),
        },
        {
            component: FifthPage,
            isShow: Boolean(reportData?.is_show_special_day),
        },
        {
            component: SixthPage,
            isShow: Boolean(
                reportData?.is_show_degree_student || reportData?.is_show_category_student,
            ),
        },
        {
            component: SeventhPage,
            isShow: Boolean(reportData?.is_show_quarter_student),
        },
        ...eighthPages,
        ...ninthPages,
        {
            component: FirstPlatformDetail,
            isShow: true,
        },
        {
            component: SecondPlatformDetail,
            isShow: true,
        },
        {
            component: ThirdPlatformDetail,
            isShow: false,
        },
        {
            component: PlatformData,
            isShow: true,
        },
        {
            component: GenerateReport,
            isShow: true,
            props: { type: 'teacher' },
        },
    ].filter(v => Boolean(v.isShow))

    const onNext = () => {
        ref.current?.swipeNext()
    }

    return (
        <ForwardLayoutRef
            onNext={onNext}
            ref={layoutRef}
            showFooter={currentIndex < swiperList.length - 1}
        >
            <Swiper
                ref={ref}
                loop={false}
                defaultIndex={0}
                rubberband={true}
                direction="vertical"
                indicator={() => null}
                onIndexChange={v => {
                    layoutRef.current?.onPlay(v)
                    setCurrentIndex(v)
                }}
                style={{
                    '--height': '100vh',
                }}
            >
                {swiperList.map((record, index) => {
                    const { component: Children, props } = record
                    return (
                        <Swiper.Item key={index}>
                            <Children
                                current={currentIndex}
                                itemIndex={index}
                                {...props}
                                {...reportData}
                            />
                        </Swiper.Item>
                    )
                })}
            </Swiper>
        </ForwardLayoutRef>
    )
}

export default TeacherReport
